<template>
  <div class="pageSearch">
    <!-- <BBForm :formItems="formItem" :labelWidth="labelWidth" :formStyle="formStyle"></BBForm> -->

    <!-- 使用 ::formData="formData" 来进行组件间数据绑定 -->
    <!-- <BBForm v-bind="searchFormConfig" :formData="formData"></BBForm> -->
    <BBForm v-bind="searchFormConfig" v-model="formData">
      <template #footer>
        <el-button @click="handleSearchClick" class="search button">搜索</el-button>
        <el-button type="primary" @click="handleResetClick" class="button">重置</el-button>
      </template>
    </BBForm>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from "@vue/runtime-core";
import { ref } from "vue";
import BBForm from "@/base-ui/form/index";
export default defineComponent({
  name: "PageSearch",
  props: {
    searchFormConfig: {
      type: Object,
      required: true,
    },
  },
  components: {
    BBForm,
  },
  emits:['handleSearch','handleReset'],
  setup(props,{emit}) {
    //双向绑定的数据，应该由filed来决定
    // formData 里面的数据应该动态来决定
    const formItems = props.searchFormConfig?.formItems ?? [];
    const formOriginData: any = {};
    for (const item of formItems) {
      formOriginData[item.filed] = "";
    }
    const formData = ref(formOriginData);

    //点击重置按钮之后触发的重置事件
    const handleResetClick = () => {
      // formData.value = formOriginData
      for (const key in formOriginData) {
        formData.value[`${key}`] = formOriginData[key];
      }
      // 触发点击之后重新获取数据
      emit('handleReset')
    };

    // 点击搜索按钮，按照条件搜索
    const handleSearchClick = () => {
      //兄弟组件通信借用父组件
      emit('handleSearch',formData.value)
      // console.log(formData.value);
    };
    return {
      formData,
      handleResetClick,
      handleSearchClick,
    };
  },
});
</script>

<style lang="less" scoped>
.footer {
  padding-bottom: 15px;
  .button {
    padding: 17px 25px;
  }
  .search {
    margin-right: 50px;
  }
}
</style>